<template>
  <div class="articles">
    <div
      class="card"
      v-for="(item, i) in list"
      :key="item.id || i"
      @click="to(item.id)"
    >
      <div class="card-left">
        <span class="card-title">{{ item.title }}</span>
        <div class="card-body" v-html="item.content.substring(0, 100)"></div>
        <div class="card-footer">
          <i
            class="el-icon el-icon-date"
            style="padding: 0 5px"
            title="修改/更新时间"
          >
            <time class="time">{{ item.updateTime | dateFormat }}</time>
          </i>
          <el-divider direction="vertical"></el-divider>
          <i
            class="el-icon el-icon-reading"
            style="padding: 0 5px"
            title="访问量"
            >{{ item.count }}</i
          >
          <el-tag size="small" class="category-tag" title="分类">{{
            item.categoryName
          }}</el-tag>
          <!-- <el-button size="small" type="primary">阅读全文</el-button> -->
        </div>
      </div>
      <div class="card-right">
        <img :src="`${imgUrl}/${item[imgVar]}`" class="image" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
    imgUrl: {
      type: String,
    },
    imgVar: {
      type: String,
      default: 'img'
    }

  },
  name: 'ArticleList',
  data() {
    return {
      // 文章列表
      // list: [],
      // 查询文章的条件
      // queryInfo: {
      //   query: "",
      //   pagenum: 1,
      //   pagesize: 5,
      // },
      // maxPageSize: 1,
      // imgUrl: `${process.env.VUE_APP_URL}/download`,
      scrollTop: 0,
    };
  },
  methods: {
    to(id) {
      this.$router.push(`/articleDetail/${id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.card {
  min-height: 180px;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  // width: 100%;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
  }
  &:hover {
    color: #006d87;
    text-decoration: underline;
  }
  .card-left {
    width: 75%;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    flex: 5;
    position: relative;

    .card-title {
      font-size: 1.25rem;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .card-body {
      width: 100%;
      height: 60%;
      color: #201f1e;
    }
    .card-footer {
      position: absolute;
      bottom: 10px;
      color: #57606f;
      width: 100%;
      .category-tag {
        position: absolute;
        right: 10px;
      }
      .el-icon:before {
        padding-right: 5px;
      }
    }
  }
  .card-right {
    width: 25%;
    flex: 2;
    display: flex;
    align-items: center;
    .image {
      width: 100%;
      // height: 100%;
    }
  }
}
</style>
